import { observable, computed, action } from 'mobx';
import { Element } from 'stores/models/core/nodeWithList';
import { stringExtendStyle } from 'common/utils/style';
import CONFIG from 'common/const/observer/text';

export default class Text extends Element {

  constructor(props) {
    super({
      ...props,
      icon: 'icon-text',
      type: 'text',
      label: '文本',
    });

    let observableProps = {};
    CONFIG.forEach(item => {
      observableProps[item.key] = item.val;
    });
    // console.log(observableProps);
    this.init({
      observableProps
    });
  }


  @computed get style() {
    return {
      width: this.width,
      height: this.height,
      top: this.top,
      left: this.left,
      backgroundColor: this.background,
      color: this.color,
      letterSpacing: this.letterSpacing,
      lineHeight: this.lineHeight,
      fontSize: this.fontSize,
      fontWeight: this.fontWeight,
      fontStyle: this.fontStyle,
      textDecoration: this.textDecoration,
      textAlign: this.textAlign,
      writingMode: this.vertical,
      WebkitTextStrokeColor: this.textStrokeColor,
      WebkitTextStrokeWidth: this.textStrokeWidth,
      opacity: this.opacity / 100,
      filter: stringExtendStyle([
        {
          key: 'brightness',
          val: this.brightness,
        },
        {
          key: 'blur',
          val: this.blur,
        },
        {
          key: 'contrast',
          val: this.contrast,
        },
        {
          key: 'saturate',
          val: this.saturate,
        },
        {
          key: 'grayscale',
          val: this.grayscale,
        },
        {
          key: 'sepia',
          val: this.sepia,
        },
        {
          key: 'hueRotate',
          val: this.hueRotate,
        },
        {
          key: 'invert',
          val: this.invert,
        }
      ]),
    };
  }


  @action addNumber(label) {
    switch (label) {
      case '字号' : this.fontSize = this.fontSize + 1; break;
      case '字距' : this.letterSpacing = this.letterSpacing + 1; break;
      case '行距' : this.lineHeight = (this.lineHeight * 10 + 1) / 10; break;
      case '描边' : this.textStrokeWidth = this.textStrokeWidth < 10 ? this.textStrokeWidth + 1 : 10; break;
    }
  }

  @action decNumber(label) {
    switch (label) {
      case '字号' : this.fontSize = this.fontSize - 1; break;
      case '字距' : this.letterSpacing = this.letterSpacing - 1; break;
      case '行距' : this.lineHeight = (this.lineHeight * 10 - 1) / 10; break;
      case '描边' : this.textStrokeWidth = this.textStrokeWidth > 0 ? this.textStrokeWidth - 1 : 0; break;
    }
  }

  @action changeNum(label, val) {
    switch (label) {
      case '字号' : this.fontSize = val; break;
      case '字距' : this.letterSpacing = val; break;
      case '行距' : this.lineHeight = val; break;
      case '描边' : this.textStrokeWidth = val; break;
    }
  }


  // 文字加粗倾斜以及下划线
  @action textStrong() {
    this.fontWeight = this.fontWeight === 'normal' ? 'bold' : 'normal';
  }
  @action textItalic() {
    this.fontStyle = this.fontStyle === 'normal' ? 'italic' : 'normal';
  }

  @action textUnderline(ind) {
    if (ind === 0) {
      this.textDecoration = this.textDecoration === 'line-through' || this.textDecoration === 'none' ? 'underline' : 'none';
    } else if (ind === 1) {
      this.textDecoration = this.textDecoration === 'underline' || this.textDecoration === 'none' ? 'line-through' : 'none';
    }
  }

  // @action whichAlign(ind) {
  //   switch (ind) {
  //     case 0: this.textAlign = 'left'; break;
  //     case 1: this.textAlign = 'center'; break;
  //     case 2: this.textAlign = 'right'; break;
  //   }
  // }

}
